<!-- 优惠券领取弹窗 -->
<template>
    <u-popup :show="show" round="40rpx" @close="close">
        <image class="closeIcon" src="/static/img/close.svg" mode="widthFix" @tap="close" />
        <view class="popupBox">
            <view class="top">
                <view class="topLeft">
                    <view class="hi">HI 欢迎</view>
                    <view class="come">来到77的线上酒馆</view>
                </view>
                <u--image width="220rpx" height="220rpx" src="/static/img/beer.png" mode="widthFix" />
            </view>
            <coupon
                v-for="(item, index) in list"
                :key="index"
                :item="item"
            />
            <view class="buttonBox">
                <u-button type="primary" text="立即使用" shape="circle" @tap="toUse()"/>
            </view>
        </view>
    </u-popup>
</template>

<script>
    import coupon from '@/components/coupon.vue';
    export default {
        name: "claimCoupon",
        components: {
            coupon
        },
        props: {
            show: Boolean
        },
        data() {
            return {
                list: [{
                    url: "/pages/brand/index/id/1",
                    money: "150",
                    title: "满2000减150元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "百达翡丽官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1"
                }, {
                    url: "/pages/brand/index/id/1",
                    money: "50",
                    title: "满1000减50元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "百达翡丽官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1"
                }]
            };
        },
        methods: {
            close() {
                this.$emit('update:show', false)
            },
            toUse() {
                this.$emit('update:show', false)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .closeIcon {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }
    .popupBox {
        padding: 30rpx;
        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16rpx 36rpx 0 20rpx;
        
            .topLeft {
                font-family: Douyin Sans, Douyin Sans;
                font-weight: bold;
                font-size: 42rpx;
                line-height: 62rpx;
                .hi {
                    color: $uni-color-primary;
                }
                .come {
                    color: $uni-text-color;
                }
            }
        }
        .buttonBox {
            margin-top: 50rpx;
        }
    }
</style>